<template>
	<view class="containar">
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			 <image :src="avatarUrl33" class="refreshIcon"></image>
			</button>
		</view>
		<view class="userName">
			<text>昵称：</text>
			 <input style="color: #000;" type="nickname" v-model="userName" class="weui-input" placeholder="请输入昵称" />
			 
			<!-- <input type="nickName" class="weui-input" :value="userName"  placeholder="请输入昵称"
				 @input="nameInput" @blur="nameInput" /> -->
		</view>
		
		<view class="btn">
			<view class="btn-sub" @click="onSubmit">保存</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted,ref,defineProps,watch, reactive} from 'vue'
	import  { base64src } from '../../utils/base64src.js'
	const userName = ref('')
	let avatarUrl33 =ref( 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132')
	
	onMounted(()=>{
	if(uni.getStorageSync('userName')){
		userName.value = uni.getStorageSync('userName')
	}
	if(uni.getStorageSync('avatar')){
		avatarUrl33.value = uni.getStorageSync('avatar')
	}
	})
	
	const ImgToBase64Func=(filePath)=> {
	    return new Promise((resolve, reject) => {
	      let baseFormat = 'data:image/png;base64,'
		  console.log('ggg',filePath)
	      let base64 = uni.getFileSystemManager().readFileSync(filePath, 'base64')
	      resolve(baseFormat + base64)
	    })
	  }
	
	
	
	

	const bindblur = (e) => {
		userName.value = e.detail.value; // 获取微信昵称
	}
	const nameInput = (e) => {
		userName.value = e.detail.value; // 获取微信昵称
		    let nickName = e.detail.value
		    uni.setStorageSync('nickName', nickName);
	}

	const onChooseavatar = (e) => {
		// console.log(e,'eeeeeeeeeee')
		
		avatarUrl33.value = e.detail.avatarUrl
		console.log(avatarUrl33,'eeeeeeeeeee')
	 }
	const onSubmit=()=> {
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(event) {
				const {
					code
				} = event
				const name = userName.value
				uni.setStorageSync('userName', userName.value);
				
				// 将这个临时的avatarUrl转换为base64格式，并存储在storage里, key="avatar_base64"
					  ImgToBase64Func(avatarUrl33.value).then(res=>{
					     console.log('base64格式的图片: ',res)
					     uni.setStorageSync('avatar_base64',res)	 
						 // 将base64格式的图片转换为本地url，同样存储在storage里, key="avatar"
						       base64src(res, result => {
						         console.log("url格式的图片: ",result) // 返回图片地址，直接赋值到image标签即可
						         uni.setStorageSync('avatar', result)
											  uni.showToast({
											  		icon: 'none',
											  		title: '保存成功'
											  })
											  uni.switchTab({
											      url:`../index/index`
											  })
						 })		 
				})
				
				
				
				
				// 判断头像以及昵称不为空 再上传
				// if (userName.value && avatarUrl.value) {
				// 	// 保存数据
				// 	uni.setStorageSync('userName', userName.value);
				// 	uni.setStorageSync('avatarUrl', avatarUrl.value);
				// 	console.log(userName.value,avatarUrl.value,'avatarUrl.value')
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传头像并填写昵称'
				// 	})
				// 	return false;
				// }
			},
			fail: function(err) {
				// 登录授权失败  
				// err.code是错误码
			}
		})
	}
</script>

<style lang="scss" scoped>
	.containar {
		min-height: 1200rpx;
		background: #fff;
		.avatarUrl {
			padding: 80rpx 0 40rpx;
			// background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: rgba(255, 255, 255, .7);
			padding: 20rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 100rpx 40rpx 100rpx;
			border-bottom: solid 1px #f2f2f2;
			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;
			.btn-sub {
				width: 670rpx;
				margin: 80rpx auto 0;
				height: 90rpx;
				background: rgba(37, 28, 93, .7);
				border-radius: 45rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}
</style>